<template>
  <basic-modal
    v-bind="$attrs"
    show-confirm
    :show-footer="false"
    @close="handleClose"
    @cancel="handleCancel"
  >
    <div>
      <BasicTable
        :table-props="tableResult"
        :columns="columns"
        :pagination-props="paginationResult"
        maxHeight="66vh"
        minHeight="48vh"
      />
    </div>
  </basic-modal>
</template>
<script setup lang="ts">
import { h, useAttrs, watch } from "vue";
import { ISaleSnModalProps } from "./props";
import { searchSaleSn } from "@/api/sales/sales.api";
import { useTableHook } from "@/components/normal/basicTable/useTableHook";
import { NButton, NIcon } from "naive-ui";
import { CheckmarkCircle } from "@vicons/ionicons5";
const props = withDefaults(defineProps<ISaleSnModalProps>(), {
  variantId: "",
  selectedSnId: () => [],
});

const columns = [
  {
    title: "#",
    type: "index",
    key: "key",
    width: "5%",
    render: (_: any, index: number) => {
      return `${index + 1}`;
    },
  },
  {
    title: "产品名称",
    key: "variantName",
  },
  {
    title: "序列号",
    key: "name",
    // render: (row: any) => {

    // },
  },
  {
    title: "创建时间",
    key: "createTime",
  },
  {
    title: "操作",
    align: "right",
    render: (row: any) => {
      return [
        h(
          NButton,
          {
            disabled: props.selectedSnId.includes(row.id),
            size: "small",
            secondary: true,
            default: "选择",
            type: "success",
            onClick: () => handlePickSn(row),
          },
          {
            icon: () =>
              h(NIcon, null, {
                default: () => h(CheckmarkCircle),
              }),
          }
        ),
      ];
    },
  },
];

const $emit = defineEmits(["update:show", "close", "pick"]);

const $attrs = useAttrs();

const { tableResult, paginationResult, getDataList } = useTableHook<any>({
  api: searchSaleSn,
  queryForm: {
    variantId: "",
    statusList: ["available"],
    snName: "",
  },
});

watch([() => $attrs.show, () => props.variantId], ([newVal1, newVal2]) => {
  console.log(`newVal1:${newVal1}`);
  console.log(`newVal2:${newVal2}`);
  if (newVal1 && newVal2) {
    paginationResult.variantId = newVal2;
    getDataList();
  }
});

const handlePickSn = (payload: any) => {
  $emit("pick", payload);
  $emit("update:show", false);
};

const handleClose = () => {
  $emit("close");
  $emit("update:show", false);
};

const handleCancel = () => {
  $emit("update:show", false);
};
</script>
<style lang="scss" scoped></style>
